import { reactive } from 'vue';

// 使用模块变量保存监听状态
let isInitialized = false;
let currentDropbox = null;

// 创建响应式文件列表
const files = ref([]);

// 暴露给外部的当前文件列表
export function getFiles() {
  return files.value;
}
// 监听文件变化的回调列表
const changeCallbacks = new Set();
// 添加文件变化监听
export function onFilesChange(callback) {
  // 参数验证
  if (typeof callback !== 'function') {
    console.error('onFilesChange: 回调参数必须是函数');
    return () => { };
  }
  changeCallbacks.add(callback);
  // 返回移除函数
  return () => changeCallbacks.delete(callback);
}
function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

function handleDrop(e) {
  preventDefaults(e);
  files.value = Array.from(e.dataTransfer.files);
  console.log('[ files.value ] >', files.value)
  changeCallbacks.forEach(cb => {
    try {
      if (typeof cb === 'function') {
        cb(files.value);
      }
    } catch (error) {
      console.error('文件变化回调执行失败:', error);
    }
  });
}

function cleanup() {
  if (currentDropbox) {
    currentDropbox.removeEventListener('drop', handleDrop);
    currentDropbox.removeEventListener('dragleave', preventDefaults);
    currentDropbox.removeEventListener('dragover', preventDefaults);
    currentDropbox.removeEventListener('dragenter', preventDefaults);
    currentDropbox = null;
  }
  isInitialized = false;
}

export function initFileDrag(ele) {
  if (!ele) {
    cleanup();
    return;
  }

  const dropbox = document.querySelector('.' + ele);
  if (!dropbox || dropbox === currentDropbox) return;

  // 清理旧的
  cleanup();

  // 设置新的
  currentDropbox = dropbox;
  dropbox.addEventListener('drop', handleDrop);
  dropbox.addEventListener('dragleave', preventDefaults);
  dropbox.addEventListener('dragover', preventDefaults);
  dropbox.addEventListener('dragenter', preventDefaults);
  isInitialized = true;
}
